// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    width: 100
    height: 100

    signal arrow_clicked()

    Rectangle
    {
        id: rectangle_bg
        color: "#00000000"
        radius: 999
        anchors.rightMargin: 5
        anchors.leftMargin: 5
        anchors.bottomMargin: 5
        anchors.topMargin: 5
        smooth: true
        border.width: 5
        border.color: "#ffffff"
        anchors.fill: parent
    }

    Item {
        id: arrow
        smooth: true
        anchors.fill: parent

        Rectangle {
            id: rectangle4
            x: 20
            y: 38
            width: 50
            height: 10
            color: "#ffffff"
            radius: 999
            smooth: true
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }

        Rectangle {
            id: rectangle5
            x: 50
            y: 31
            width: 30
            height: 5
            color: "#ffffff"
            radius: 999
            anchors.right: parent.right
            anchors.rightMargin: 23
            anchors.bottom: rectangle4.top
            anchors.bottomMargin: 3
            smooth: true
            rotation: 45
        }

        Rectangle {
            id: rectangle6
            x: 50
            width: 30
            height: 5
            color: "#ffffff"
            radius: 999
            anchors.right: parent.right
            anchors.rightMargin: 23
            anchors.top: rectangle4.bottom
            anchors.topMargin: 3
            smooth: true
            rotation: -45
        }

        Behavior on rotation {
            PropertyAnimation { duration: 200; easing.type: Easing.OutQuad }
        }

    }

    MouseArea {
        id: mouse_area1
        hoverEnabled: true
        anchors.fill: parent

        onClicked: arrow_clicked()
    }

    states: [
        State {
            name: "over"
            when: mouse_area1.containsMouse

            PropertyChanges {
                target: rectangle_bg
                color: "#ffffff"
                opacity: 0.500
            }

            PropertyChanges {
                target: rectangle4
                color: "#000000"
            }

            PropertyChanges {
                target: rectangle5
                color: "#000000"
            }

            PropertyChanges {
                target: rectangle6
                color: "#000000"
            }
        }
    ]

}
